<template>
  <div>



    <!--    //商品展示表格-->
    <template>
      <el-table :data="order.records" border style="width: 100%">
        <el-table-column fixed prop="orderNum" label="订单号" width="100">
        </el-table-column>
        <el-table-column prop="orderAddress" label="地址" width="100">
        </el-table-column>
        <el-table-column prop="orderPhone" label="电话" width="100">
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="100">
        </el-table-column>
        <el-table-column prop="orderScore" label="下单积分" width="100">
        </el-table-column>
        <el-table-column prop="orderScore" label="下单积分" width="100">
        </el-table-column>
        <el-table-column prop="orderUser" label="下单用户" width="100">
        </el-table-column>
        <el-table-column prop="count" label="数量" width="100">
        </el-table-column>
        </el-table-column>
        <el-table-column prop="unitScore" label="单价" width="100">
        </el-table-column>





        <el-table-column label="商品状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.orderState==0">未发货</span>
            <span v-if="scope.row.orderState==1">发货</span>
            <span v-if="scope.row.orderState==2">配送中</span>
            <span v-if="scope.row.orderState==3">确认收货</span>
            <span v-if="scope.row.orderState==4">取消</span>

          </template>
        </el-table-column>
        <el-table-column label="取消" width="300">
          <template slot-scope="scope">
            <span v-if="scope.row.canceller==0">用户取消</span>
            <span v-if="scope.row.canceller==1">平台取消</span>
            <span >:{{scope.row.cancelCause}}</span>

          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button v-if="scope.row.orderState==0" @click="platUpdateOrderState(scope.row.orderNum,1)" type="text"
              size="small">发货</el-button>
            <el-button v-if="scope.row.orderState==1" @click="platUpdateOrderState(scope.row.orderNum,0)" type="text"
              size="small">配货</el-button>
            <el-button type="text" v-if="scope.row.orderState!=4" @click="ok(scope.row.orderNum)"
              size="small">取消</el-button>
            <span v-if="scope.row.orderState==4">已取消</span>

          </template>
        </el-table-column>
      </el-table>
      </el-table>
    </template>
    <!-- 分页 -->
   <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="order.current" :page-sizes="[1, 2, 3, 9]" :page-size="order.size"
      layout="total, sizes, prev, pager, next, jumper" :total="findorde.total">
    </el-pagination>


    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>取消原因：</span>
      <el-input v-model="order1.cancelCause" placeholder="请输入内容"></el-input>
      <span slot="footer" class="dialog-footer">

        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="platCancelOrder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {

        dialogVisible: false,
        order:{},

        order1: {


          orderNum: "",

          cancelCause: ""

        },
        findorde: {
          current: 1,
          orderNum: "",
          orderState: "",
          size: 1
        },
        platUpdateStateForm: {
          orderNum: "",
          orderState: ""
        }
      }

    },
    methods: {
      handleSizeChange(val) {

        console.log(`每页 ${val} 条`);
   
        this.topage(this.order.current, val)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);

        this.topage(val, this.order.size)
      },
      topage(current, size) {
        
        this.findorde.current = current
        this.findorde.size = size
        this.$http.post("/mall/order/platSelectOrder.admin", this.findorde).then(resp => {
          this.order = resp.data.data
        })
      },


      platSelectOrder() { //平台查询订单

        this.$http.post("/mall/order/platSelectOrder.admin", this.findorde)
          .then(resp => {
            this.order = resp.data.data
          console.log(this.order)
          console.log(this.order.current)
          })
      },
      platUpdateOrderState(obj, obj1) { //修改订单状态
        alert(obj)
        this.platUpdateStateForm.orderNum = obj

        this.platUpdateStateForm.orderState = obj1
        this.$http.post("/mall/order/platUpdateOrderState.admin", this.platUpdateStateForm)
          .then(resp => {
            this.platSelectOrder()

          })
      },
      ok(obj) {
        this.order1.orderNum = obj
        this.dialogVisible = true
      },


      platCancelOrder() { //取消订单状态

        this.$http.post("/mall/order/platCancelOrder.admin", this.order1)
          .then(resp => {
            this.platSelectOrder()
            this.dialogVisible = false
          })
      },
      handleClose() {
        this.dialogVisible = false
      }

    },
    created() {
      this.platSelectOrder()
    }
  }
</script>

<style>
</style>
